<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
	<div class="contain">
		<div class="bg">
			<div class="backgroundBanner">
				<div class="banner">
          <van-swipe :autoplay="3000" :height="450">
            <van-swipe-item v-for="(item,index) in product.imgList" :key="index" @click="toPreviewImages(index)">
              <img v-lazy="require('../../assets/img/'+item)" style="height: 450px"/>
            </van-swipe-item>
          </van-swipe>
				</div>
			</div>
			<div class="productNameBox">
				<div class="productNameLeft">
					<div class="productName">
						{{product.productName}}
					</div>
					<div class="productDes">
						{{product.des}}
					</div>
				</div>
				<div class="share">
					<img src="../../assets/img/share.png" />
					<div>分享</div>
				</div>
			</div>
			<div class="priceBox">
				<div class="price">
					<span class="unit">¥</span>{{product.price}}
				</div>
				<div class="priceOfVip">
					<span class="unit">¥</span>{{product.originalPrice}}
				</div>
				<div class="vipTip">
					<img src="../../assets/img/vip.png" />
					会员价
				</div>
				<div class="integralTip">
					赠送积分
				</div>
			</div>
			<div class="openVip">
				<div class="left">
					<img src="../../assets/img/vip.png" />
					开通超级会员，一年预计可省999元
				</div>
				<div class="right">
					<a href="">立即开通</a>
				</div>
			</div>
		</div>
		<div class="medium bg">
			<div class="item">
				<div class="title">
					积分
				</div>
				<div class="content">
					购买本商品可获得100积分
				</div>
				<div class="rightNav">
					<img src="../../assets/img/in.png" />
				</div>
			</div>
			<div class="item">
				<div class="title">
					服务
				</div>
				<div class="content">
					<div class="contentTips">
						<img src="../../assets/img/check.png" />
						极速配送
					</div>
					<div class="contentTips">
						<img src="../../assets/img/check.png" />
						退款保证
					</div>
					<div class="contentTips">
						<img src="../../assets/img/check.png" />
						品控质检
					</div>
				</div>
				<div class="rightNav">
					<img src="../../assets/img/in.png" />
				</div>
			</div>
			<div class="item">
				<div class="title">
					评分
				</div>
				<div class="content">
					<div>
            <van-rate v-model="product.score" readonly />
					</div>
					<div class="contentTips">
						月销量 {{product.saleNumMonth}}
					</div>
					<div class="contentTips">
						总销量 {{product.saleNumTotal}}
					</div>
				</div>
				<div class="rightNav">
					<img src="../../assets/img/in.png" />
				</div>
			</div>
		</div>
		<div class="detal bg">
      <img v-for="(item,index) in product.imgList" :key="index" v-lazy="require('../../assets/img/'+item)" style="height: 450px;box-sizing: border-box;border: none;"/>
		</div>
		<div class="butBox">
			<div class="pay">
        <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服" dot />
          <van-goods-action-icon v-if="cartNum === 0" icon="cart-o" text="购物车" @click="toCart" />
          <van-goods-action-icon v-if="cartNum > 0" icon="cart-o" text="购物车" @click="toCart" :badge="cartNum" />
          <van-goods-action-icon icon="shop-o" text="店铺" />
          <van-goods-action-button type="warning" text="加入购物车" @click="show=true"/>
          <van-goods-action-button type="danger" text="立即购买" @click="show=true"/>
        </van-goods-action>
			</div>
		</div>

    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :quota="quota"
      :quota-used="quotaUsed"
      :hide-stock="sku.hide_stock"
      :message-config="messageConfig"
      @buy-clicked="toPay"
      @add-cart="addCar"
    />

    <van-image-preview v-model="showImage" :startPosition="startPosition" :images="previewImages">
    </van-image-preview>

	</div>
</template>

<script>
  import data from "@/data/data.json";
  import {getStore,setStore} from "@/store/store.js";
  import {
    Sku,
    Rate,
    Swipe,
    SwipeItem,
    Image as VanImage,
    ImagePreview,
    GoodsAction,
    GoodsActionIcon,
    GoodsActionButton
  } from 'vant';

	export default {
    components: {
      [Sku.name]: Sku,
      [Rate.name]: Rate,
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
      [VanImage.name]: VanImage,
      [GoodsAction.name]: GoodsAction,
      [GoodsActionIcon.name]: GoodsActionIcon,
      [GoodsActionButton.name]: GoodsActionButton,
      [ImagePreview.Component.name]: ImagePreview.Component,
    },

		data() {
			return {
        show: false,
        goodsId: '',
        quota: 5,
        quotaUsed: 0,
        sku: {
          // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
          // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
          tree: [
            // {
            //   k: '颜色', // skuKeyName：规格类目名称
            //   k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            //   v: [
            //     {
            //       id: '1', // skuValueId：规格值 id
            //       name: '红色', // skuValueName：规格值名称
            //     },
            //     {
            //       id: '2',
            //       name: '蓝色'
            //     }
            //   ],
            //   largeImageMode: false, //  是否展示大图模式
            // }
          ],
          // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
          list: [
            // {
            //   id: 2259, // skuId
            //   s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
            //   price: 100, // 价格（单位分）
            //   stock_num: 110 // 当前 sku 组合对应的库存
            // },
            // {
            //   id: 2260, // skuId
            //   s1: '2', // 规格类目 k_s 为 s1 的对应规格值 id
            //   price: 99, // 价格（单位分）
            //   stock_num: 99 // 当前 sku 组合对应的库存
            // }
          ],
          price: '0', // 默认价格（单位元）
          stock_num: 0, // 商品总库存
          collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
          none_sku: false, // 是否无规格商品
          hide_stock: false // 是否隐藏剩余库存
        },
        goods: {
          // 默认商品 sku 缩略图
          picture: ''
        },
        messageConfig: {
          // 数据结构见下方文档
        },
        cartNum: 0,
				typeIdArr: [1, 1],
				product: {
				  score: 0,
					imgList: [],
				},
				active: '',
        showImage: false,
        startPosition: 1,
        previewImages: [],//预览大图
			}
		},
    mounted(){
      this.$store.commit('SET_HEADER_FOOTER', {showSearchHeader: true,headerName:'商品详情',pageName:'productDetail',showFooter: false});
		  //获取商品
      this.product = {
        score: 0,
        imgList: [],
        types:[]
      };
		  let id = this.$route.query.id;
      console.info(this.$route.query);
      data.products.forEach(item=>{
		    if(item.id == id){
          this.product = item;
          this.goods.picture = require('../../assets/img/'+this.product.img);
          this.goodsId = this.product.id;
          this.sku.price = this.product.price;
          this.sku.stock_num = this.product.stockNum;
          this.previewImages = [];
          this.product.imgList.forEach((item,index)=>{
            this.previewImages.push(require('../../assets/img/'+item))
          });
          if(this.product.types && this.product.types.length > 0){

            this.product.types.forEach((item,index)=>{
              let obj1 = {
                k: item.name, // skuKeyName：规格类目名称
                k_s: 's'+(index+1), // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                v: item.items,
                largeImageMode: false, //  是否展示大图模式
              };
              this.sku.tree.push(obj1);

              let id = 1;
              item.items.forEach((item2,index2)=>{
                let obj2 = {
                  id: id, // skuId
                  s1: item2.id, // 规格类目 k_s 为 s1 的对应规格值 id
                  price: this.product.price * 100, // 价格（单位分）
                  stock_num: this.product.stockNum // 当前 sku 组合对应的库存
                };
                id++;
                this.sku.list.push(obj2);
              });
              
            });
          }
        }
      })
      this.getCartNum();
    },
		methods: {
      goBack(){//返回
        this.$router.go(-1)
      },
      toCart(){
        this.$router.push({path:'/cart'})
      },
			//购物车
      getCartNum() {
        this.cartNum = 0;
        let cartList = [];
        const obj =  getStore({name:'cart_list'});
        if (obj) {
          cartList = obj;
        }
        for(let i=0;i<cartList.length;i++){
          this.cartNum += cartList[i].num;
        }
			},
			//添加购物车
			addCar(skuData){
        console.info(skuData);
				if(!this.product || !this.product.id){
          this.$toast.fail('商品数据异常，无法加入购物车');
					return;
				}
				try {
					let check = false;
					let checkIndex = -1;
					let cartList = [];

					const obj =  getStore({name:'cart_list'});
					if (obj) {
						cartList = obj;
					}
					for(let i=0;i<cartList.length;i++){
					  if(cartList[i].id === this.product.id){
						check = true;
						checkIndex = i;
					  }
					}
					this.product['num'] = skuData.selectedNum;
					if(check){
					  this.product['num'] =  this.product['num'] + cartList[checkIndex]['num'];//已存在购物车 数量+1
					  //先删除
					  cartList.splice(checkIndex,1);
					}
					cartList.unshift(this.product);
					//存到缓存
          setStore({name:'cart_list',content: cartList});
          this.$toast.success('加入购物车成功');
          this.getCartNum();
				} catch (e) {
					console.log(e);
          this.$toast.fail('加入购物车失败');
				}
			},
      //结算
      toPay(skuData) {
        console.info(skuData);
        let value = skuData.goodsId + '_' + skuData.selectedNum;
        this.$router.push({
          path:'/pay',
          query:{
            value: value
          }
        })
      },
      toPreviewImages(index){//预览大图
        this.showImage = true;
        this.startPosition = index;
      }
		}
	}
</script>

<style scoped>
  .nav-header {
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    background-color: #FFFFFF;
  }
  .nav-header a {
    text-decoration: none;
    color: #000;
  }
  .nav-header img {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0 1rem;
  }
	.contain {
		background-color: #f5f5f5;
	}

	.bg {
		background-color: #ffffff;
		margin-bottom: 10px;
    top: 3rem;
	}

	.backgroundBanner {
		padding: 0 10px;
		box-sizing: border-box;
	}

	.banner {
		width: 100%;
		margin: 0 auto;
	}

	.banner img {
		width: 100%;
	}

	.productNameBox {
    display: flex;
  }
  .productNameBox .productNameLeft {
    flex: 1;
  }
  .productNameBox .productNameLeft .productName {
    font-size: 16px;
    font-weight: 600;
    margin: 10px 10px 5px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .productNameBox .productNameLeft .productDes {
    font-size: 16px;
    margin: 0 10px 10px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    color: #666;
  }

  .productNameBox	.share {
			height: 30px;
			line-height: 30px;
			margin-top: 20px;
			width: 60px;
			background-color: #f08902;
			border-bottom-left-radius: 10px;
			border-top-left-radius: 10px;
			display: flex;
			color: #ffffff;
			font-size: 14px;
	}
  .productNameBox	.share img {
    width: 20px;
    height: 20px;
    margin: 5px 5px 0 5px;
  }

	.priceBox {
    display: flex;
    margin-left: 10px;
  }
  .priceBox	.unit {
    font-size: 14px
  }

  .priceBox	.price {
    color: red;
    font-weight: 600;
    font-size: 18px;
  }

  .priceBox 	.priceOfVip {
    font-weight: 600;
    font-size: 18px;
    margin-left: 10px;
    text-decoration: line-through;
  }

  .priceBox	.vipTip {
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    color: #ffffff;
    background-color: #2e434d;
    display: flex;
    margin: 0 10px 0 20px;
    padding: 0 5px;
  }
  .priceBox	.vipTip img{
    width: 16px;
    height: 16px;
    margin: 5px 5px 0 0;
  }

  .priceBox	.integralTip {
			font-size: 14px;
			height: 25px;
			line-height: 25px;
			color: #e8a51f;
			border: 1px solid #e8a51f;
			padding: 0 5px;
	}

	.openVip {
    height: 50px;
    display: flex;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-image: linear-gradient(to right, #eae0c7, #efe9bb);
    margin: 10px 10px;
  }
  .openVip .left {
			line-height: 50px;
			flex: 1;
		}
  .openVip .left img{
    width: 16px;
    height: 16px;
    margin: 5px 5px 0 5px;
  }

  .openVip .right {
			width: 40px;
			background-color: #2e434d;
			padding: 5px 0 5px 7px;
	}
  .openVip .right a{
    color: #ffffff;
    text-decoration: none;
  }

  .medium .item {
    margin: 0 10px;
    display: flex;
    height: 50px;
    line-height: 50px;
  }
  .medium .item .title {
    font-size: 16px;
  }
  .medium .item .content {
    flex: 1;
    font-size: 14px;
    color: #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 10px;
    display: flex;
  }
  .medium .item .content .contentTips {
    display: flex;
    font-size: 12px;
    margin-left: 10px;
  }
  .medium .item .content .contentTips img {
    width: 20px;
    height: 20px;
    margin: 15px 0 0 0;
  }
  .medium .item .rightNav {
    width: 30px;
  }
  .medium .item .rightNav img {
    width: 26px;
    height: 26px;
    margin: 12px 5px 0 0;
  }
  .medium .item:not(:last-child) {
    border-bottom: 1px solid #eee;
  }

	.detal img {
    width: 100%;
  }

  .butBox {
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 99;
    width: 100%;
    height: 50px;
    background-color: #ffffff;
  }
  .butBox .pay{
    height: 50px;
    display: flex;
  }
  .butBox .pay .left {
    flex: 1;
    display: flex;
  }
  .butBox .pay .right {
    width: 200px;
    display: flex;
  }
  .butBox .pay .item {
    text-align: center;
    width: 55px;
  }
  .butBox .pay .item  .imgBox img {
    width: 22px;
    height: 22px;
    margin-top: 3px;
  }
  .butBox .pay .item .text {
    color: #666;
    font-size: 12px;
  }
  .butBox .pay .addCartBut {
    width: 50%;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    background-color: #e8a51f;
  }
  .butBox .pay .addCartBut:hover {
    opacity: 0.5;
  }
  .butBox .pay .payBut {
    width: 50%;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    background-color: RGB(244, 108, 108);
  }
  .butBox .pay .payBut:hover {
    opacity: 0.5;
  }

  .payModal {
    position: fixed;
    z-index: 200;
    width: 100vw;
    height: auto;
    left: 0;
    bottom: 0;
    background: #fff;
  }
  .payModal .top {
    height: 100px;
    display: flex;
    margin: 10px 0 0 10px;
  }
  .payModal .top .hidden .typeItemActive {
    z-index: 5;
  }
  .payModal .top .hidden {
    z-index: 1;
    float: left;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
  }
  .payModal .top .hidden img {
    position: absolute;
    width: 100px;
    height: 100px;
  }
  .payModal .top .nameBox {
    flex: 1;
  }
  .payModal .top .nameBox .name {
    font-size: 16px;
    font-weight: 600;
    margin: 10px 10px 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .payModal .top .nameBox .des {
    font-size: 14px;
    font-weight: 600;
    margin: 10px 10px 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    color: #666;
  }
  .payModal .top .nameBox .priceActive {
    color: red;
    font-size: 16px;
    margin: 0 10px 0 10px;
    font-weight: bolder;
  }
  .payModal .top .nameBox .originalPrice {
    color: #666;
    font-size: 14px;
    text-decoration: line-through;
  }
  .payModal .top .close {
    float: right;
    width: 25px;
    height: 25px;
  }
  .payModal .top .close img {
    width: 25px;
    height: 25px;
  }
  .payModal .type {
    margin: 0 10px 0 10px;
  }
  .payModal .type .title {
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
  }
  .payModal .type .typeItemBox .typeItem {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    border: 1px solid #eee;
    color: #666;
    margin: 0 5px 10px 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, 0.04);
  }
  .payModal .type .typeItemBox .typeItemActive {
    border: 1px solid #ee8216;
    color: #FFFFFF;
    background-color: #f08902;
  }
	.payModalClose {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, .3);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 199;
	}
  .bottom {
    margin-top: 10px;
    border-top: 1px solid #eee;
    background-color: #f5f5f5;
  }
	.bottom .numBox {
    display: flex;
    margin: 10px 0 10px 10px;
  }
  .bottom .numBox .but {
    height: 30px;
    width: 30px;
    line-height: 30px;
    border: 1px solid #dcdcdc;
    text-align: center;
    font-size: 16px;
  }
  .bottom .numBox input {
    width: 40px;
    height: 30px;
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    text-align: center;
  }
  .bottom .payBut {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    background-color: RGB(244, 108, 108);
    margin: 0 10px;
  }
  .bottom .payBut:hover {
    opacity: 0.5;
  }
</style>
